<template>
  <div class="flow-step" :class="type">
    <template v-if="type === 'wait'">
      <div class="wait-label">等待</div>
      <div class="input-row">
        <el-input
          class="step-input-large"
          v-model.number="inputValue"
          @input="onInput"
          size="medium"
          clearable
        />
      </div>
      <div class="wait-unit">秒</div>
      <div class="submit-row">
        <el-button
          type="primary"
          size="small"
          :disabled="!inputValue"
          @click="handleSubmit"
          class="submit-btn"
        >
          保存
        </el-button>
      </div>
    </template>
    <template v-else-if="type === 'sensor-wait'">
      <div class="step-title">{{ title }}</div>
      <div class="input-row">
        <el-input
          class="step-input-large"
          v-model.number="inputValue"
          @input="onInput"
          size="medium"
          clearable
        />
      </div>
      <div class="wait-unit">秒后</div>
      <div class="submit-row">
        <el-button
          type="primary"
          size="small"
          :disabled="!inputValue"
          @click="handleSubmit"
          class="submit-btn"
        >
            保存
        </el-button>
      </div>
    </template>
    <template v-else>
      <div class="step-title">{{ title }}</div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'FlowStep',
  props: {
    title: String,
    desc: String,
    type: String, // 'sensor' | 'action' | 'wait' | 'sensor-wait'
    propertyId: {
      type: String,
      default: null,
    },
    value: {
      type: Number,
      default: null,
      validator: function(value) {
        return value === null || typeof value === 'number';
      }
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      inputValue: this.value,
      isSubmitting: false
    };
  },
  watch: {
    value(val) {
      this.inputValue = val === null ? null : Number(val);
    }
  },
  methods: {
    onInput(val) {
      const numVal = val === '' ? null : Number(val);
      this.$emit('input', numVal);
    },
    async handleSubmit() {
      if (!this.inputValue) return;
      this.isSubmitting = true;
      try {
        // 触发提交事件，让父组件处理实际的提交逻辑
        await this.$emit('submit', {
          value: this.inputValue,
          type: this.type,
          title: this.title,
          propertyId: this.propertyId,
          index: this.index
        });

      } catch (error) {
        this.$message.error('提交失败，请重试');
      } finally {
        this.isSubmitting = false;
      }
    }
  }
};
</script>

<style scoped>
.flow-step {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(33,150,243,0.08);
  margin: 0.6rem auto;
  padding: 1rem 0.5rem;
  text-align: center;
  transition: box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flow-step.sensor-wait,
.flow-step.wait {
  border-left: 5px solid #2196f3;
  background: #e3f2fd;
}
.flow-step.sensor {
  border-left: 5px solid #4caf50;
}
.flow-step.action {
  border-left: 5px solid #ff9800;
}
.step-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.5rem;
}
.wait-label {
  font-size: 1.1rem;
  color: #2196f3;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.wait-unit {
  font-size: 1.1rem;
  color: #2196f3;
  font-weight: 500;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
}
.sensor-wait-row {
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  margin-top: 0.2rem;
}
.step-input-large {
  width: 90%;
  max-width: 180px;
  font-size: 1.15rem;
  margin: 0 0.5rem;
}
.input-row {
  display: flex;
  justify-content: center;
  margin: 0.2rem 0;
}
.submit-row {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
.submit-btn {
  min-width: 80px;
}
</style>
